<template>
    <div id="Page">
        <header>
          <p id="title">{{lang.name}}</p>
        </header>
        <div id="Content">
          <Navs @onSelected="itemSelected" :rtl="lang.rtl" :selectedIndex="currentNavIndex" :navs="navs" ></Navs>
          <keep-alive>
            <router-view/>
          </keep-alive>
        </div>
        <footer :style="{flexDirection: flex_direction}">
          <Progress class="MainProgress" :size="20" :visible="tasksAvailable" /> <p v-if="tasks.length > 1"> &nbsp;&nbsp;{{ tasks.length }} &nbsp;&nbsp; </p> <p v-if="tasksAvailable">{{ taskText }}</p>
        </footer>
    </div>
    
</template>

<script>
import Vue from "vue";
import { mapState, mapActions, mapGetters } from "vuex";

import Navs from "./components/Nav";
import Progress from "./components/Progress";

export default {
  components: {
    Navs,
    Progress
  },
  data: () => {
    return {
      langCode: "",
      currentStep: 0
    };
  },
  computed: {
    ...mapState("workPanel", ["navs", "currentNavIndex", "tasks"]),
    lang() {
      return this.$store.state.lang;
    },
    tasksAvailable() {
      return this.tasks.length > 0;
    },
    ...mapGetters("lang", ["flex_direction"]),
    taskText() {
      return this.tasks.length == 1
        ? this.tasks[0].message
        : this.lang.task_running;
    }
  },
  methods: {
    itemSelected(index, item) {
      // this.$store.commit("workPanel/setCurrentNavIndex", index);
      this.$router.replace(item.link);
    },
    Update() {
      this.$store.commit("workPanel/setCurrentNavIndex", 1);
    }
  },
  created() {}
};
</script>





<style lang="scss" scoped>
@import "./assets/style";
@import "./assets/colors";

$Page-Margin: 0;
$header-height: 30px;
$footer-height: $header-height;
$border-line-color: #ccc;

* {
  margin: 0;
  padding: 0;
}

#title {
}

#Page {
  position: absolute;
  top: $Page-Margin;
  bottom: $Page-Margin;
  left: $Page-Margin;
  right: $Page-Margin;
  // background-color: pink;
  overflow: hidden;
  display: flex;
  flex-flow: column;

  header {
    background-color: $color-primary;
    height: $header-height;
    width: 100%;
    text-align: center;
    flex-shrink: 0;
    border: {
      bottom: {
        color: $border-line-color;
        width: 1px;
        style: solid;
      }
    }
  }

  #Content {
    width: 100%;
    // background-color: red;
    flex-grow: 1;
    // overflow: auto;
  }

  footer {
    flex-shrink: 0;
    height: $footer-height;
    width: 100%;

    display: flex;
    align-items: center;

    border: {
      top: {
        color: $border-line-color;
        width: 1px;
        style: solid;
      }
    }
    .MainProgress {
      margin: 5px;
    }
  }

  button {
    min-width: 80px;
    min-height: 24px;
    padding: {
      left: 5px;
      right: 5px;
    }
  }

  #Content {
    display: flex;
    flex-direction: column;
  }
}
</style>


<style>
/*************************-- Begin for global styles --**************************/
@font-face {
  font-family: ukij-cjk;
  src: url("./assets/UKIJCJK.ttf");
}

* {
  font-family: ukij-cjk;
}
.rtl-layout {
  direction: rtl;
}
.ltr-layout {
  direction: ltr;
}
Button {
  min-width: 80px;
}
</style>

<style lang="scss">
@import "./Theme/iview-rtl/index";
/*************************-- End for global styles --**************************/
</style>